<template>
  <div class="member-order-page">
    <xtx-tab v-model="currentTab" :tabs="tabs">
      <!-- 订单列表 -->
      <div class="xtx-order-list">
        <order-item
          @on-cancel="cancelOrder"
          @on-delete="deleteOrder"
          @on-logistics="findLogistics"
          v-for="item in orderList"
          :key="item.id"
          :order="item"
        ></order-item>
      </div>
      <!-- 分页 -->
      <xtx-pagination :total="100"></xtx-pagination>
    </xtx-tab>
    <order-cancel ref="orderCancel" :order="currentOrder"></order-cancel>
    <order-logistics-dialog ref="orderLogisticsDialog" :logistics="logistics"></order-logistics-dialog>
  </div>
</template>

<script>
import OrderItem from './components/order-item'
import OrderCancel from './components/order-cancel'
import OrderLogisticsDialog from './components/order-logistics-dialog'
export default {
  name: 'member-order-page',
  components: { OrderItem, OrderCancel, OrderLogisticsDialog },
  data () {
    return {
      currentTab: 'all',
      tabs: [
        { title: '全部订单', name: 'all' },
        { title: '待付款', name: 'unpay' },
        { title: '待发货', name: 'deliver' },
        { title: '待收货', name: 'receive' },
        { title: '待评价', name: 'comment' },
        { title: '已取消', name: 'cancel' }
      ],
      // 假数据
      orderList: [
        { id: 1, orderState: 1, payLatestTime: '2020-11-05 11:36:20' },
        { id: 2, orderState: 2 },
        { id: 3, orderState: 3 },
        { id: 4, orderState: 4 },
        { id: 5, orderState: 5 },
        { id: 6, orderState: 6 }
      ],
      currentOrder: {},
      logistics: {}
    }
  },
  methods: {
    // 取消订单
    cancelOrder (id) {
      this.currentOrder = this.orderList.find((item) => item.id === id)
      this.$nextTick(() => {
        this.$refs.orderCancel.openDialog()
      })
    },
    // 查看物流
    async findLogistics (id) {
      const { data } = await this.$http.get(`member/order/${id}/logistics`)
      this.logistics = data.result
      this.$refs.orderLogisticsDialog.open()
    },
    // 删除订单
    deleteOrder (id) {
      this.$confirm({ title: '温馨提示', text: '您确认删除该订单吗？' }).then(async (valid) => {
        if (valid) {
          await this.$http.delete(`member/order/${id}`)
          this.$message({ message: '删除订单成功', type: 'success' })
          const index = this.orderList.findIndex(item => item.id === id)
          this.orderList.splice(index, 1)
        }
      }).catch(e => {
        this.$message({ message: '删除订单失败', type: 'error' })
      })
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-order-list {
  padding: 20px 20px 0 20px;
}

</style>
